<template>
  <div class="qualityAddBox">
    <div>
      <el-card class="card">
        <el-form
          ref="formAddRef1"
          style="width: 400px"
          :model="formAdd"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="收货门店" prop="storeId">
            <el-select @change="selectStoreFn" v-model="formAdd.storeId" placeholder="请选择门店">
              <el-option
                v-for="item in optionsStore"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="card">
        <el-form
          ref="formAddRef2"
          style="max-width: 400px"
          :model="formAdd"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="客服编号" prop="customerService">
            <el-input placeholder="请输入客服编号" v-model="formAdd.customerService" />
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="card">
        <template #header>
          <div class="card-header">
            <span>产品信息</span>
            <span>请添写></span>
          </div>
        </template>
        <el-form
          ref="formAddRef"
          style="max-width: 400px"
          :model="formAdd"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <!-- <el-form-item label="收货地址" prop="region">
            <el-select v-model="formAdd.region" placeholder="请选择地址">
              <el-option
                v-for="item in provinceQualitNumber"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="产品类型" prop="filmType">
            <el-select
              @change="getFilmList"
              v-model="formAdd.filmType"
              placeholder="请选择产品类型"
            >
              <el-option
                v-for="item in optionsFilmType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="产品名称" prop="filmId">
            <el-select
              @change="selectFilmName"
              v-model="formAdd.filmId"
              placeholder="请选择产品名称"
            >
              <el-option
                v-for="item in serFilmNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="机长代码" prop="filmId">
            <el-select @change="selectNumber" v-model="formAdd.number1" placeholder="请选择">
              <el-option
                v-for="item in optionsNumber1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="品检代码" prop="filmId">
            <el-select @change="selectNumber2" v-model="formAdd.number2" placeholder="请选择">
              <el-option
                v-for="item in optionsNumber2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="大卷代码" prop="filmId">
            <el-select @change="selectNumber3" v-model="formAdd.number3" placeholder="请选择">
              <el-option
                v-for="item in optionsNumber3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="开始编号" prop="startNumber">
            <el-input v-model="formAdd.startNumber" placeholder="请输入开始编号" />
          </el-form-item>
          <el-form-item label="结束编号" prop="endNumber">
            <el-input v-model="formAdd.endNumber" placeholder="请输入结束编号" />
          </el-form-item>
          <el-form-item label="质保年限" prop="filmAge">
            <el-input v-model="formAdd.filmAge" placeholder="请输入质保年限" />
          </el-form-item>
          <el-form-item label="漆面膜次数" prop="lacquerNumber">
            <el-input v-model="formAdd.lacquerNumber" placeholder="请输入漆面膜次数" />
          </el-form-item>
          <el-form-item label="车顶膜次数" prop="roofNumber">
            <el-input v-model="formAdd.roofNumber" placeholder="请输入车顶膜次数" />
          </el-form-item>
          <el-form-item label="太阳膜次数" prop="sunNumber">
            <el-input v-model="formAdd.sunNumber" placeholder="请输入太阳膜次数" />
          </el-form-item>
          <el-form-item label="改色膜次数" prop="colorAlterationNumber">
            <el-input v-model="formAdd.colorAlterationNumber" placeholder="请输入改色膜次数" />
          </el-form-item>
          <el-form-item label="总贴膜次数" prop="count">
            <el-input v-model="formAdd.count" placeholder="请输入总贴膜次数" />
          </el-form-item>
          <el-form-item>
            <div style="display: flex; justify-content: center; width: 100%">
              <el-button type="primary" @click="onSubmit">添加</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { filmListSelect } from '@/http/api/film.js'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { getstorelistAll, storeInventoryAdd } from '@/http/api/store.js'
import { numberList, number2List, number3List } from '@/http/api/number.js'
import { ref, reactive, onMounted, defineExpose } from 'vue'
import { provinceQualitNumber } from '@/components/js/addressOptions'
let formAdd = reactive({})
let optionsStore = ref([])
let optionsFilmType = [
  { value: '漆面膜', label: '漆面膜' },
  { value: '改色膜', label: '改色膜' },
  { value: '车顶膜', label: '车顶膜' },
  { value: '太阳膜', label: '太阳膜' }
]
let optionsNumber1 = ref([])
let optionsNumber2 = ref([])
let optionsNumber3 = ref([])
let serFilmNameList = ref([])
const getStoreList = async () => {
  const res = await getstorelistAll({
    status: 1
  })
  optionsStore.value = res.data.res.map((item) => {
    return {
      label: item.name,
      value: item.id,
      country: item.country,
      region: item.region.includes("[") ? JSON.parse(item.region)[0] : item.region.split(',')[0]
    }
  })
  console.log(optionsStore.value)
}
const rules = reactive({
  storeId: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  customerService: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  startNumber: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  endNumber: [
    { required: true, message: '请输入', trigger: 'blur' },
  ], region: [
    { required: true, message: '请选择', trigger: 'blur' },
  ], filmType: [
    { required: true, message: '请选择', trigger: 'blur' },
  ], filmId: [
    { required: true, message: '请选择', trigger: 'blur' },
  ], filmAge: [
    { required: true, message: '请输入', trigger: 'blur' },
  ], lacquerNumber: [
    { required: true, message: '请输入', trigger: 'blur' },
  ], roofNumber: [
    { required: true, message: '请输入', trigger: 'blur' },
  ], sunNumber: [
    { required: true, message: '请输入', trigger: 'blur' },
  ], colorAlterationNumber: [
    { required: true, message: '请输入', trigger: 'blur' },
  ], count: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],

})
let filmName = ref('')
// 修改选择后重新获取膜列表
const getFilmList = async () => {
  let serchFilm = {
    storeId: formAdd.storeId,
    type: formAdd.filmType
  }
  const res = await filmListSelect(serchFilm)
  serFilmNameList.value = res.data.res.map((item) => {
    return {
      value: item.id,
      label: item.name,
      ...item
    }
  })
  console.log(number1, number2, number3, number4)
  if (formAdd.filmType && filmName.value) {

    let QualityNumber = dayjs().format('YYMMDD')
    formAdd.startNumber = `${number4}${QualityNumber}${number1}${number2}-${number3}-001`
    formAdd.endNumber = `${number4}${QualityNumber}${number1}${number2}-${number3}-`
  }
}
// 选择门店
const selectStoreFn = (data) => {
  optionsStore.value.forEach((item) => {
    if (item.value == data) {
      formAdd.region = item.region
    }
  })

}
// 选择膜
const selectFilmName = (data) => {
  console.log(data)
  serFilmNameList.value.forEach((item) => {
    if (item.value == data) {
      formAdd.filmAge = item.age
      formAdd.count = item.countAll
      formAdd.lacquerNumber = item.lacquerNumber
      formAdd.roofNumber = item.roofNumber
      formAdd.sunNumber = item.sunNumber
      formAdd.colorAlterationNumber = item.colorAlterationNumber
      filmName.value = item.name
      number4 = item.nameNumber
    }
  })
  getFilmList()
}
let formAddRef = ref(null)
let formAddRef1 = ref(null)
let formAddRef2 = ref(null)
// 添加按钮
const onSubmit = async (formEl) => {
  await formAddRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        if (!formAdd.storeId) {
          throw '请选择门店'
        }
        if (!formAdd.customerService) {
          throw '客服编号'
        }
        if (
          formAdd.lacquerNumber * 1 +
          formAdd.colorAlterationNumber * 1 +
          formAdd.roofNumber * 1 +
          formAdd.sunNumber * 1 >
          formAdd.count
        ) {
          throw '膜的次数和大于总次数请修改'
        } else {
          formAdd.filmType = formAdd.filmType
            .replace(/[()]/g, '')
            .replace(/[a-zA-Z]/g, '')
          formAdd.region = formAdd.region.replace(/[()]/g, '').replace(/[a-zA-Z]/g, '')
          let AllData = JSON.parse(JSON.stringify(formAdd))
          delete AllData.number1
          delete AllData.number2
          delete AllData.number3
          AllData.storeId = [AllData.storeId]
          const res = await storeInventoryAdd(AllData)
          if (res.data.type == 2) {
            ElMessage.error(res.data.message)
          } else {
            ElMessage.success(res.data.message)
          }

          const keys = Object.keys(formAdd)
          let obj = {}
          keys.forEach((item) => {
            obj[item] = ""
          })
          Object.assign(formAdd, obj)
        }
      } catch (error) {
        ElMessage.error(error)
      }

    } else {
      ElMessage.error('请补充完整信息')
    }
  })

}
const getNumberData = async () => {
  let page = {
    page: 1,
    size: 10000
  }
  let res = await numberList(page)
  optionsNumber1.value = res.data.res.map((item) => {
    return {
      label: item.code,
      value: item.id
    }
  })
  let res2 = await number2List(page)
  optionsNumber2.value = res2.data.res.map((item) => {
    return {
      label: item.code,
      value: item.id
    }
  })
  let res3 = await number3List(page)
  optionsNumber3.value = res3.data.res.map((item) => {
    return {
      label: item.code,
      value: item.id
    }
  })
}
let number1 = ''
let number2 = ''
let number3 = ''
let number4 = ''
const selectNumber = (data) => {
  optionsNumber1.value.forEach((item) => {
    if (item.value == data) {
      number1 = item.label
    }
  })
  getFilmList()
}
const selectNumber2 = (data) => {
  optionsNumber2.value.forEach((item) => {
    if (item.value == data) {
      number2 = item.label
    }
  })
  getFilmList()
}
const selectNumber3 = (data) => {
  optionsNumber3.value.forEach((item) => {
    if (item.value == data) {
      number3 = item.label
    }
  })
  getFilmList()
}
onMounted(() => {
  formAdd.customerService = JSON.parse(localStorage.getItem('userInfo')).number
  formAdd.customerPhone = JSON.parse(localStorage.getItem('userInfo')).phone
  getStoreList()
  getNumberData()
})
defineExpose({ getStoreList })
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
}
.qualityAddBox {
  display: flex;
  justify-content: center;
}
.card {
  width: 480px;
  margin-bottom: 10px;
}
</style>